<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型示例</title>
    <style>
        /* 外部容器样式 */
        .container {
            margin: 50px;
            padding: 20px;
            border: 2px dashed #333;
            background-color: #f5f5f5;
        }
        
        /* 盒子模型示例 */
        .box {
            /* 内容区样式 */
            width: 200px;
            height: 150px;
            background-color: #4a90e2;
            color: white;
            text-align: center;
            line-height: 150px;
            
            /* 内边距 */
            padding: 20px;
            
            /* 边框 */
            border: 5px solid #2c3e50;
            
            /* 外边距 */
            margin: 30px;
        }
        
        /* 辅助说明样式 */
        .explanation {
            margin: 20px;
            padding: 15px;
            background-color: #e8f4f8;
            border-left: 4px solid #3498db;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">内容区</div>
        
        <div class="explanation">
            <h3>盒子模型组成说明：</h3>
            <ul>
                <li><strong>内容区</strong>：蓝色区域，设置了width:200px; height:150px;</li>
                <li><strong>内边距</strong>：蓝色区域与深色边框之间的蓝色空间，设置了padding:20px;</li>
                <li><strong>边框</strong>：深色实线边框，设置了border:5px solid #2c3e50;</li>
                <li><strong>外边距</strong>：边框与外部虚线容器之间的空白区域，设置了margin:30px;</li>
            </ul>
        </div>
    </div>
</body>
</html>